<template>
    <div class="telVerify"
         style="z-index:3;"
         :class="bgClass">
        <div class="bg"></div>
        <div class="content"
             v-if="!showUserType">
            <div class="item">
                <label>手机号:</label>
                <div>
                    <input type="text"
                           placeholder="请输入手机号"
                           v-model="tel" />
                </div>
            </div>
            <div class="item">
                <label>验证码:</label>
                <div>
                    <input type="text"
                           placeholder="请输入验证码"
                           v-model="code" />
                    <button :disabled="time !== 60"
                            @click="startTime">{{time == 60?'验证码':`${time}s`}}</button>
                </div>
            </div>
            <button class="submit"
                    @click="verifyTel">确定</button>
        </div>
        <div class="content"
             v-if="showUserType">
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>人员类型</label>
                    <i class="iconfont icon-required"></i>
                </div>
                <group>
                    <popup-picker :data="list2"
                                  v-model="Station"
                                  @on-change="selectCategory2"
                                  placeholder="请选择"></popup-picker>
                </group>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>{{Station[0] === '管理人员'? '岗位':'工种'}}</label>
                    <i class="iconfont icon-required"></i>
                </div>
                <group>
                    <popup-picker :data="list3"
                                  v-model="UserKind"
                                  @on-show="selectCategory"
                                  placeholder="请选择"></popup-picker>
                </group>
            </div>
            <button class="submit"
                    @click="updateUserInfo">确定</button>
        </div>
    </div>
</template>

<script>
import { categoryList } from '@/api/api'
export default {
    name: 'telephoneVerify',
    data () {
        return {
            // tel: '18303010646',
            tel: '',
            time: 60,
            code: '',
            setInterval: null,
            userInfo: '',
            bgClass: '',
            list2: [['管理人员', '施工人员']],
            Station: ['管理人员'],
            list3: [],
            UserKind: [],
            showUserType: false
        }
    },
    props: {
        unionid: '',
        openid: '',
        qyWx: ''
    },
    created () {
        this.showUserType = this.qyWx
        this.userInfo = localStorage.userInfo ? JSON.parse(localStorage.userInfo) : {}
        this.bgClass = `bg${localStorage.getItem('wechatType')}`// 1表示 智慧助安管家  2表示 隐患排查助理 3 人员管家
    },
    beforeDestroy () {
        clearInterval(this.setInterval)
    },
    methods: {
        startTime () {
            if (this.time !== 60) return false
            if (!(/^1[3456789]\d{9}$/.test(this.tel))) {
                this.$vux.toast.text('请输入正确的手机号')
                return false
            }
            this.getCode()
            this.time--
            this.setInterval = setInterval(() => {
                this.time--
                if (this.time <= 0) {
                    this.time = 60
                    clearInterval(this.setInterval)
                }
            }, 1000)
        },
        getCode () {
            let params = {
                'business': 'SMSverification',
                'data': this.tel
            }
            this.$axiosAjax.getConfigJson(params).then((res) => {
                if (res.data.code !== 0) {
                    clearInterval(this.setInterval)
                    this.time = 60
                }
            }).catch(() => {
                clearInterval(this.setInterval)
                this.time = 60
            })
        },

        verifyTel () {
            if (!(/^1[3456789]\d{9}$/.test(this.tel))) { // 正式环境
                this.$vux.toast.text('请输入正确的手机号')
                return false
            } else if (!this.code) {
                this.$vux.toast.text('请输入验证码')
                return false
            }
            let params = {
                'business': 'VerifyTel',
                'data': {
                    'tel': this.tel,
                    'code': this.code,
                    'unionid': this.unionid,
                    'openid': this.openid
                }
            }
            this.$axiosAjax.getConfigJson(params).then((res) => {
                if (res.data.code === 0) {
                    let json = JSON.parse(res.data.data)
                    json.unionid = this.unionid
                    json.openid = this.openid
                    localStorage.setItem('loginInfo', JSON.stringify(json))
                    this.$parent.showTelVerify = false
                    this.$parent.showPage = true
                    this.$router.replace({
                        path: '/addUser'
                    })
                } else if (res.data.code === 3) {
                    let json = res.data
                    localStorage.setItem('userInfo', JSON.stringify(json))
                    this.userInfo = json
                    if (res.data.IsUpdate == 'no') {
                        this.showUserType = true
                    } else {
                        this.$parent.showTelVerify = false
                        this.$parent.showPage = true
                    }
                } else {
                    this.$vux.toast.text(res.data.info)
                }
            }).catch((res) => {
            })
            // let params = { //  测试代码
            //     'business': 'GetUserInfoByTel',
            //     'data': this.tel
            // }
            // this.$axiosAjax.getConfigJson(params).then((res) => {
            //     if (res.data.code === 0) {
            //         localStorage.setItem('userInfo', JSON.stringify(res.data))
            //         this.$parent.showTelVerify = false
            //         this.$parent.showPage = true
            //         // window.location.reload()
            //         // this.showUserType = true
            //     } else {
            //     }
            // }).catch((res) => {
            // })
        },
        selectCategory2 () {
            this.UserKind = []
        },
        selectCategory () {
            this.UserKind = []
            if (!this.Station || this.Station.length === 0) {
                this.$vux.toast.text('请选择人员类型')
                this.show = false
                return false
            }
            let type = this.Station[0] === '管理人员' ? '0' : '1'
            let param = {
                allowPaging: true,
                data: {
                    type: type,
                    departSir: this.userInfo.departsir
                },
                pageIndex: 0,
                pageSize: 20
            }
            categoryList(param).then((res) => {
                this.list3 = []
                let data = []
                this.categoryData = res.data
                res.data.forEach(category => {
                    data.push(category.UserType)
                })
                this.list3.push(data)
            })
        },
        updateUserInfo () {
            if (!this.Station[0]) {
                this.$vux.toast.text('请选择人员类型')
                return false
            } else if (!this.UserKind[0]) {
                this.$vux.toast.text('请选择岗位')
                return false
            }
            let UserKind = ''
            for (let i = 0; i < this.categoryData.length; i++) {
                if (this.UserKind[0] == this.categoryData[i].UserType) {
                    UserKind = this.categoryData[i].ID
                }
            }
            let params = {
                'business': 'UpdateUserInfoByTel',
                'data': {
                    'userid': this.userInfo.userid,
                    'DepartID': this.userInfo.deptid,
                    'Station': this.Station[0],
                    'UserKind': UserKind
                }
            }
            this.$axiosAjax.getConfigJson(params).then((res) => {
                if (res.data.code === 0) {
                    this.$parent.showTelVerify = false
                    this.$parent.showPage = true
                } else {
                }
            }).catch((res) => {
            })
        }
    }
}
</script>
<style scoped>
.telVerify {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
}
.bg1 {
    background: url('../assets/bg.jpg') no-repeat top center;
    background-size: cover;
}
.bg2 {
    background: url('../assets/hideZLBg.jpg') no-repeat top center;
    background-size: cover;
}
.bg3 {
    background: url('../assets/userCenterBg.jpg') no-repeat top center;
    background-size: cover;
}
.bg {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.3);
}
.content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 300px;
    padding: 20px;
    background: #fff;
    border-radius: 4px;
}
.content .item {
    color: #666;
    font-size: 16px;
    display: flex;
    padding: 15px 0;
}
.content .item label {
    width: 60px;
    height: 26px;
    line-height: 26px;
}
.content input {
    width: 100%;
    height: 26px;
    color: #666;
    font-size: 14px;
    border-bottom: 1px solid #ccc;
}
.content .item > div {
    position: relative;
    flex: 1;
}
.content .item button {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 70px;
    height: 30px;
    background: #419df7;
    color: #fff;
    padding: 0 5px;
    border-radius: 2px;
}
.content .item button[disabled] {
    background: #ccc;
}
.submit {
    display: block;
    width: 100%;
    height: 35px;
    margin: 0 auto;
    border-radius: 4px;
    background: #419df7;
    color: #fff;
    margin-top: 10px;
}
</style>
<style>
.telVerify .form-item .vux-cell-primary {
    min-width: 100px;
}
.telVerify .form-item .vux-cell-value {
    max-width: 100px;
}
</style>
